<template>
    <div class="qilin-QilinRichtext">
        <Editor
            id="tinyce"
            v-model="ownRichtextConfig.content"
            :init="ownRichtextConfig.inits"
        ></Editor>
    </div>
</template>

<script setup>
import tinymce from 'tinymce/tinymce'
// import 'tinymce/models/dom' // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue' // 引入组件
import 'tinymce/icons/default'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'

// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'

// 引入富文本中文字体
import "@/assets/langs/zh-Hans.js";

// 接收来自父组件的传参
const propsValue=defineProps({
    richtextConfig:{
        type:Object,
        default(){
            return {
                content:"",
                options:{
                    placeholder:"请输入文本内容",
                    theme:"snow",
                    modules: {
                        toolbar: [
                            [{ 'header': [1, 2, 3, 4, false] }],
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote', 'code-block'],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            [{ 'script': 'sub' }, { 'script': 'super' }],
                            [{ 'indent': '-1' }, { 'indent': '+1' }],
                            [{ 'direction': 'rtl' }],
                            [{ 'size': ['small', false, 'large', 'huge'] }],
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                            [{ 'color': [] }, { 'background': [] }],
                            [{ 'font': [] }],
                            [{ 'align': [] }],
                            ['clean']
                        ]
                    },
                    formats: [
                        'header', 'bold', 'italic', 'underline', 'strike',
                        'blockquote', 'code-block', 'list', 'bullet', 'indent',
                        'link', 'image', 'color', 'background', 'font', 'size', 'align'
                    ]
                },
                inits:{
                    //初始化数据
                    selector: "#tinyce", //定义要替换为富文本编辑区域的元素
                    language:"zh-Hans", //语言包，需要额外下载语言包引入
                    // theme:"modern", //主题
                    skin:"oxide", //皮肤名称
                    height: 300, // 限制高度
                    visual:true, //是否启用可视化模式
                    width:"100%", //指定编辑器的宽度
                    resize:"both", //是否允许用户调整编辑区域大小
                    content_editable:true, //指定内容编辑区域的可编辑性
                    statusbar: false, //定义状态栏容器的id
                    object_resizing: false,
                    image_description: false, //是否允许用户在插入图片时输入图像的描述信息
                    image_dimensions:["400*300"], // 操作图片
                    plugins: 'link lists image code table wordcount', // 富文本插件
                    font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px 128px', //定义显示在字体大小下拉菜单中的自定义字体大小格式列表。
                    font_family_formats:`
                        微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;
                        苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif
                    `,
                    // 定义工具栏容器得到ID和按钮的组合
                    toolbar:`
                        undo redo fontfamily fontsize fontname bold italic underline strikethrough |
                        fontsizeselect | forecolor | alignleft aligncenter alignright alignjustify |
                        bullist numlist outdent indent | link image
                    `,
                    branding: false, // 是否显示Tinymce的版权信息和商标
                    menubar: true, //顶部菜单栏显示--定义菜单栏的配置对象
                    paste_data_images: true, // 禁止粘贴图片
                }
            };
        }
    }
});

// 暴露父组件的自定义方法
const emits=defineEmits(["update:richtextConfig"]);

// 组件自身的配置项
let ownRichtextConfig=computed({
    get(){
        return propsValue.richtextConfig;
    },
    set(val){
        emits("update:richtextConfig",val);
    }
});


// 暴露子组件的方法
defineExpose({

});

// 生命周期逻辑区域
onMounted(()=>{
    tinymce.init(ownRichtextConfig.value.inits); //初始化富文本
});


</script>

<style lang="scss" scoped>
.qilin-QilinRichtext{
    width:100%;
}
</style>
